<template>
	<div class="orderdetail">	
		<div class="od_head">
			<div class="odh_img">
				<el-avatar shape="square" :size="160" :src="url"></el-avatar>
			</div>
			<div class="odh_desc">
				<div class="odh_desc_head">
					<div>咚咚哒哒美食店</div>
					<div><el-button type="primary" round size="small" @click="returnShoppingCart">返回到购物车</el-button></div>
				</div> 
				<div class="hr" />
				<div class="odh_desc_tel">
					<i class="iconfont">&#xe625;</i> 13442345436
				</div>
				<div class="odh_desc_address">
					<i class="iconfont">&#xe60e;</i> 沈阳市浑南区白塔街道东北大学浑南校区
				</div>
			</div>
		</div>
		<div id="map"></div>
		<div class="od_card" v-if="isloading">
			<div class="odc_true">实付金额：<i class="iconfont">&#xe6b6;</i>{{userOrder.order_true_price}}</div>
			<div class="desc">
				<div class="odc_id"><i class="iconfont">&#xe61a;</i>订单号码：{{userOrder.order_id}}</div>
				<div class="odc_createtime" style="margin-top: 8px;">
					<i class="iconfont">&#xe6f8;</i>创建时间：{{userOrder.order_create_time}}
				</div>
				<div class="odc_paidtime" style="margin-top: 8px;">
					<i class="iconfont">&#xe6f8;</i>支付时间：{{userOrder.order_pay_time}}</div>
				<div class="odc_carrier" style="margin-top: 8px;">
					<i class="iconfont">&#xe632;</i>骑手姓名：{{userOrder.carrier}}</div>
				<div class="odc_tel" style="margin-top: 8px;">
					<i class="iconfont">&#xe625;</i>骑手电话：{{userOrder.carrier_telephone}}</div>
				<div class="odc_origin" style="margin-top: 8px;">
					<i class="iconfont">&#xe630;</i>原始价格：{{userOrder.order_original_price}}</div>
				<div class="odc_address" style="margin-top: 8px;">
					<i class="iconfont">&#xe60e;</i>收货地址：{{address}}</div>
				<div class="odc_paidstyle" style="margin-top: 8px;">
					<i class="iconfont">&#xe603;</i>支付方式：{{userOrder.payStyle.constant_term_meaning}}</div>
			</div>
		</div>
		<div class="od_food">
			<div class="odf_head">菜品列表</div>
			<el-table :data="userOrderDetailList" style="width:760px; margin: 20px;">
				<el-table-column label="菜品图片" width="100">
					<template slot-scope="scope">
						<el-avatar shape="square" :size="60" :src="`http://localhost:8080/res/${scope.row.food.food_img}`" style="margin-left: 10px;margin-right: 10px;"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="food_name" label="菜品名称" width="130">
				</el-table-column>
				<el-table-column prop="food_amount" label="菜品数量" width="130">
				</el-table-column>

				<el-table-column prop="detail_attach" label="备注">
				</el-table-column>
				<el-table-column prop="food_total" label="总价" width="180">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import BMap from 'BMap';
	import OrderDetailService from './OrderDetailService.js';
	export default {
		name: "OrderDetail",
		data() {
			return {
				url: require('../../assets/餐厅.jpg'),
				userOrder: {},
				userOrderDetailList: [],
				address: '',
				isloading: false,
			}
		},
		created() {
			let orderId = this.$route.params.order_id;
			OrderDetailService.getGoodOrderService(orderId,res=>{
				console.log(res);
				this.userOrder = res.usergoodorder;
				this.address = res.usergoodorder.userAddress.receiver_address;
				this.isloading = true;
			});
			OrderDetailService.getAllDetailService(orderId,res=>{
				console.log(res);
				
				this.userOrderDetailList = res.usergoodorderlist;
			});
		},
		mounted() {
			this.createMap();
		},
		methods: {
			createMap() {
				// 创建Map实例
				var map = new BMap.Map('map');
				// 初始化地图,设置中心点坐标和地图级别			
				map.centerAndZoom(new BMap.Point(123.430933,41.659108), 14);
				//添加地图类型控件		
				map.addControl(new BMap.MapTypeControl({
					mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
				}));
				// 设置地图显示的城市	
				map.setCurrentCity("沈阳");
				//开启鼠标滚轮缩放			
				map.enableScrollWheelZoom(true);
			},
			returnShoppingCart(){
				this.$router.push('ShoppingCart');
			}
		}
	}
</script>

<style scoped lang="less">
	
	.orderdetail {
		width: 800px;
		height: 100%;
		margin: 0 auto;

		#map {
			margin-top: 10px;
			min-height: 350px;
		}

		//background-color: #F2F6FC;
		.od_head {
			margin-top: 10px;
			height: 200px;
			display: flex;
			background-color: #F2F6FC;
			box-shadow: 0 2px 2px 0 rgba(96, 98, 102, 0.1);

			.odh_img {
				flex: 1;
				margin: 20px;
			}

			.odh_desc {
				flex: 5;
				//background-color: lightcoral;
				margin: 10px;

				.odh_desc_head {
					display: flex;
					justify-content:space-between;
					margin-top: 10px;
					font-family: "Helvetica Neue";
					font-size: 22px;
					line-height: 24px;
					color: #606266; //字体颜色
					font-weight: 400; //加粗
					letter-spacing: .1em;
				}

				.odh_desc_tel {
					margin-top: 25px;
					font-family: "Helvetica Neue";
					font-size: 18px;
					color: #909399; //字体颜色
					font-weight: 400; //加粗
					letter-spacing: .1em;
				}

				.odh_desc_address {
					margin-top: 25px;
					font-family: "Helvetica Neue";
					font-size: 18px;
					color: #909399; //字体颜色
					font-weight: 400; //加粗
					letter-spacing: .1em;
				}


			}
		}

		.od_card {
			height: 300px;
			margin-top: 20px;
			//margin: 50px auto;
			box-shadow: 0 2px 2px 0 rgba(96, 98, 102, 0.1);
			background-color: #F2F6FC;

			.odc_true {
				padding-top: 20px;
				padding-left: 20px;
				font-family: "Helvetica Neue";
				font-size: 18px;
				color: #303133; //字体颜色
				font-weight: 400; //加粗
				letter-spacing: .1em;

			}

			.desc {
				padding: 20px;
				font-family: "Helvetica Neue";
				font-size: 14px;
				color: #909399; //字体颜色
				font-weight: 400; //加粗
				letter-spacing: .4em;
			}

		}

		.od_food {
			margin-top: 20px;
			//height: 300px;
			background-color: #F2F6FC;

			.odf_head {
				padding-top: 20px;
				padding-left: 20px;
				font-family: "Helvetica Neue";
				font-size: 22px;
				line-height: 24px;
				color: #606266; //字体颜色
				font-weight: 400; //加粗
				letter-spacing: .1em;
			}

			.odf_card {
				height: 80px;
				margin: 20px;
				background-color: lightblue;

				.odf_card_img {
					padding-top: 10px;
					margin: 10px;
				}
			}
		}

		//分割线
		.hr {
			border-bottom: 2px solid #606266;
			height: 0px;
			padding-bottom: 20px;
		}
	}
</style>
